<!-- playground-fold -->
<!DOCTYPE html>
<html lang="en">

	<head>
			<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width, initial-scale=1.0">
			<title>Sample</title>
	</head>

	<body style="background-color: var(--sapBackgroundColor); height: 350px">
		<!-- playground-fold-end -->
		<ui5-search show-clear-icon placeholder="Type D to search ...">
			<ui5-search-item-group header-text="Suppliers (4)">
				<ui5-search-item text="Danish Fishing Trading Company (100000043)" icon="customer-and-supplier" description="Byline"></ui5-search-item>
				<ui5-search-item text="Daily Update Ltd. (290210057)" icon="customer-and-supplier" description="Byline"></ui5-search-item>
				<ui5-search-item text="Damian United (120001884)" icon="customer-and-supplier" description="Byline"></ui5-search-item>
				<ui5-search-item text="Troda Tech (100230044)" icon="customer-and-supplier" description="Byline"></ui5-search-item>
			</ui5-search-item-group>

			<ui5-search-item-group header-text="People (4)">
				<ui5-search-item text="John Doe" description="Byline">
					<ui5-avatar slot="image" size="XS">
						<img src="../assets/images/avatars/man_avatar_3.png" alt="John Miller">
					</ui5-avatar>
				</ui5-search-item>
			</ui5-search-item-group>
		</ui5-search>
		<!-- playground-fold -->
		<script type="module" src="main.js"></script>
	</body>

</html>
<!-- playground-fold-end -->
